<template>
  <div style="margin-bottom: 8px">
    <el-scrollbar
      :vertical="false"
      style="width: 100%;height: 46px;"
    >
      <!--                    <div class="erp-page-table-header">-->
      <!--                        <div class="screen-box">-->
      <!--                            <div class="screen-list">-->
      <!--                                <div-->
      <!--                                    class="screen-item"-->
      <!--                                    v-for="(item, index) in viewList"-->
      <!--                                    :key="index"-->
      <!--                                    :class="{active: index === activeIndex}"-->
      <!--                                    @click="changeScreen(item, index)"-->
      <!--                                >-->
      <!--                                    <span class="screen-name">{{item.name}}</span>-->
      <!--                                    <erp-badge :value="total" :loading="loading" :visible="index === activeIndex"  class="badge-item"></erp-badge>-->
      <!--                                </div>-->
      <!--                                <div class="screen-item" :class="{active: activeMore}" v-if="moreList && moreList.length > 0">-->
      <!--                                    <div class="screen-name more">-->
      <!--                                        <el-dropdown :hide-on-click="false" trigger="click" @command="handleCommand">-->
      <!--                                            <span class="el-dropdown-link" :class="{active: activeMore}">-->
      <!--                                                <span class="text">{{moreText}}</span>-->
      <!--                                                <erp-badge :value="total" v-show="activeMore"  class="badge-item" color="#000" bg-color=""></erp-badge>-->
      <!--                                                <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
      <!--                                            </span>-->
      <!--                                            <el-dropdown-menu slot="dropdown">-->
      <!--                                                <el-dropdown-item v-for="(item, index) in moreList" :command="item" :key="index">{{item.name}}</el-dropdown-item>-->
      <!--                                            </el-dropdown-menu>-->
      <!--                                        </el-dropdown>-->
      <!--                                    </div>-->
      <!--                                </div>-->
      <!--                            </div>-->
      <!--                        </div>-->
      <!--                        <div class="handle-box">-->
      <!--                            <div class="screen-list">-->
      <!--                                <div class="screen-item" v-if="showExport">-->
      <!--                                    <el-dropdown @command="commandExport" class="export" trigger="click" >-->
      <!--                                        <span class="el-dropdown-link">-->
      <!--                                            <i class="el-icon-download"></i>-->
      <!--                                            {{$t('common.erp.export.export')}}-->
      <!--                                        </span>-->
      <!--                                        <el-dropdown-menu slot="dropdown">-->
      <!--                                            <el-dropdown-item command="export">{{$t('common.erp.export.exportData')}}</el-dropdown-item>-->
      <!--                                        </el-dropdown-menu>-->
      <!--                                    </el-dropdown>-->
      <!--                                </div>-->
      <!--                                <slot name="handle-action" />-->
      <!--                                <div class="screen-item handle" v-if="listPermission">-->
      <!--                                    <el-tooltip-->
      <!--                                        :disabled="disabled"-->
      <!--                                        :content="headSearchPlaceholder"-->
      <!--                                    >-->
      <!--                                        <el-input-->
      <!--                                            class="query"-->
      <!--                                            v-if="showKeywordSearch"-->
      <!--                                            :placeholder="headSearchPlaceholder"-->
      <!--                                            v-model="keyword"-->
      <!--                                            @clear="clearKeyword"-->
      <!--                                            @keyup.enter.native="searchKeyword"-->
      <!--                                            clearable-->
      <!--                                        >-->
      <!--                                            <el-button class="erp-keyword-search-btn" @click="searchKeyword" slot="append" icon="el-icon-search"></el-button>-->
      <!--                                        </el-input>-->
      <!--                                    </el-tooltip>-->
      <!--                                </div>-->
      <!--                            </div>-->
      <!--                        </div>-->
      <!--                        <slot name="handle-action" />-->
      <!--                        <export-form ref="exportForm" :fields="fields" @export="handleExport"></export-form>-->
      <!--                    </div>-->
      <div class="erp-page-header">
        <div class="left">
          <div class="left-box">
            <div
              v-if="listPermission && showKeywordSearch"
              class="keyword-box"
            >
              <span class="title">关键字：</span>
              <el-input
                v-model="keyword"
                type="text"
                class="input"
                :placeholder="headSearchPlaceholder"
                clearable
                @keyup.enter.native="searchKeyword"
                @clear="clearKeyword"
              />
              <el-button
                type="primary"
                class="btn"
                @click="searchKeyword"
              >
                查询
              </el-button>
            </div>
            <div
              v-if="listPermission && !(showKeywordSearch) && (treeTable.showKeywordSearch)"
              class="keyword-box"
            >
              <span class="title">关键字：</span>
              <el-input
                v-model="treeTableKeyword"
                type="text"
                class="input"
                :placeholder="treeTable.placeholder"
                clearable
                @keyup.enter.native="searchTreeTableKeyword"
                @clear="clearTreeTableKeyword"
              />
              <el-button
                type="primary"
                class="btn"
                @click="searchTreeTableKeyword"
              >
                查询
              </el-button>
            </div>
            <div
              v-if="listPermission && showQuery"
              class="advance-query"
              @click="toggleShowAdvancedBox"
            >
              {{ $t('common.erp.search.advancedQuery') }}
              <i
                v-show="!showAdvancedBox"
                class="el-icon-caret-bottom"
              />
              <i
                v-show="showAdvancedBox"
                class="el-icon-caret-top"
              />
            </div>
            <div
              v-show="false"
              class="screen-box"
            >
              <div class="screen-list">
                <div
                  v-for="(item, index) in viewList"
                  :key="index"
                  class="screen-item"
                  :class="{active: index === activeIndex}"
                  @click="changeScreen(item, index)"
                >
                  <span class="screen-name">{{ item.name }}</span>
                  <erp-badge
                    :value="total"
                    :loading="loading"
                    :visible="index === activeIndex"
                    class="badge-item"
                  />
                </div>
                <div
                  v-if="moreList && moreList.length > 0"
                  class="screen-item"
                  :class="{active: activeMore}"
                >
                  <div class="screen-name more">
                    <el-dropdown
                      :hide-on-click="false"
                      trigger="click"
                      @command="handleCommand"
                    >
                      <span
                        class="el-dropdown-link"
                        :class="{active: activeMore}"
                      >
                        <span class="text">{{ moreText }}</span>
                        <erp-badge
                          v-show="activeMore"
                          :value="total"
                          class="badge-item"
                          color="#000"
                          bg-color=""
                        />
                        <i class="el-icon-arrow-down el-icon--right" />
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="(item, index) in moreList"
                          :key="index"
                          :command="item"
                        >
                          {{ item.name }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <slot name="handle-action" />
        </div>
      </div>
    </el-scrollbar>
    <div
      v-show="showAdvancedBox"
      ref="advancedBox"
      class="advanced-box"
    >
      <erp-page-advanced-query
        :advanced-query-loading="loading"
        :form-config-list="advancedSearch"
        :data-source-api="dataSourceApi"
        :tree-search-key="treeSearchKey"
        @search="handleAdvancedSearch"
        @get-tree-search-data="getTreeSearchData"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Badge, Dropdown, DropdownItem, DropdownMenu, Tooltip} from "element-ui";

const ErpBadge = () => import('./ErpBadge');
const ErpPageAdvancedQuery = () => import('./ErpPageAdvancedQuery');
const ErpPageTableSearch = () => import('./ErpPageTableSearch');
const ExportForm = () => import('./ExportForm');
Vue.use(Badge);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Dropdown);
Vue.use(Tooltip);
/**
 * 列表表格头部
 * @author maolin
 */
export default {
  name: "ErpPageTableHeader",
  components: {
    ErpPageTableSearch,
    ExportForm,
    ErpBadge,
    ErpPageAdvancedQuery
  },
  props: {
    /**
     * 树表格配置，showKeywordSearch：只有为树形表格并且关闭了关键字搜索才会显示，placeholder：输入框提示
     * @public
     */
    treeTable: {
      type: Object,
      default () {
        return {
          // 只有为树形表格并且关闭了关键字搜索才会显示
          showKeywordSearch: false,
          // 输入框提示
          placeholder: '输入关键字搜索',
        };
      }
    },
    /**
     * 表格是否为树
     * @public
     */
    isTree: {
      type: Boolean,
      default: false
    },
    /**
     * 树搜索key
     * @public
     */
    treeSearchKey:{
      type: String,
      default: null
    },
    /**
     * 数据源api配置
     * @public
     */
    dataSourceApi: {
      type: [Object, String],
      default: () => {}
    },
    /**
     * 是否加载中
     * @public
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 快速筛选配置列表【已废弃】
     * @public
     */
    screenList: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 头部按钮配置
     * @public
     */
    headButtons: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 表格总数
     * @public
     */
    total: {
      type: Number,
      default: 0
    },
    /**
     * 是否在表格加载完成后自动请求一次数据
     * @public
     */
    initData: {
      type: Boolean,
      default: false
    },
    /**
     * 表格中的字段配置
     * @public
     */
    fields: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 是否显示导出
     * @public
     */
    showExport: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示高级查询
     * @public
     */
    showQuery: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示关键字查询
     * @public
     */
    showKeywordSearch: {
      type: Boolean,
      default: false
    },
    /**
     * 关键字查询时传递的key设置
     * @public
     */
    keywordKey: {
      type: String,
      default: "name"
    },
    /**
     * 高级查询表单配置
     * @public
     */
    advancedSearch: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 是否显示新增按钮,【已废弃】
     * @public
     */
    canCreated: {
      type: Boolean,
      default: true
    },
    /**
     * 是否展示批量删除按钮,【已废弃】
     * @public
     */
    canBatchDeleted: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否展示批量删除按钮,【已废弃】
     * @public
     */
    headSearchPlaceholder: {
      type: String,
      default: ''
    },
    /**
     * 是否具有查看列表的权限
     * @public
     */
    listPermission: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      showAdvancedBox: false,
      activeIndex: null,
      activeMore: false,
      keyword: null,
      treeTableKeyword: null,
      moreText: this.$t('common.more')
    };
  },
  computed: {
    viewList () {
      let list = this.screenList;
      let data = [];
      if (list && list.length > 0) {
        for (let i in list) {
          if(list[i].more === undefined || !list[i].more) {
            data.push(list[i]);
          }
        }
      }
      return data;
    },
    moreList () {
      let list = this.screenList;
      let data = [];
      if (list && list.length > 0) {
        for (let i in list) {
          if(list[i].more !== undefined && list[i].more) {
            data.push(list[i]);
          }
        }
      }
      return data;
    },
    disabled () {
      return !this.headSearchPlaceholder;
    }
  },
  watch: {
    showAdvancedBox (show) {
      this.$nextTick(() => {
        let height = this.$refs.advancedBox.getBoundingClientRect().height;
        height = height + 2;
        this.$emit('toggle-advanced-box', {height: height, show: show});
      });
    }
  },
  mounted() {
    if(this.initData ) {
      // if (this.screenList && this.screenList.length > 0) {
      //     this.activeIndex = 0
      //     this.changeScreen(this.screenList[this.activeIndex], this.activeIndex)
      // } else {
      //     this.$emit('search', {search: {}})
      // }
      this.$emit('search', {search: {}});
    }
  },
  methods: {
    /**
     * 获取了树搜索的数据
     * @private
     * @param data
     */
    getTreeSearchData (data) {
      /**
       * 通知父组件获取到了搜索树的列表数据
       * @param data
       */
      this.$emit('get-tree-search-data',data);
    },
    /**
     * 切换快速筛选
     * @private
     * @param item
     * @param index
     */
    changeScreen (item, index) {
      this.resetMore();
      this.activeIndex = index;
      /**
       * 搜索
       */
      this.$emit('search', item);
    },
    /**
     * 展示表格搜索
     * @private
     */
    showSearch () {
      this.$refs.erpPageTableSearch.show();
    },
    /**
     * 选中更多筛选时触发搜索
     * @private
     * @param command
     */
    handleCommand (command) {
      this.activeIndex = null;
      this.activeMore = true;
      this.moreText = command.name;
      this.$emit('search', command);
    },
    /**
     * 重置更多
     * @private
     */
    resetMore () {
      this.activeMore = false;
      this.moreText = this.$t('common.more');
    },
    /**
     * 导出【已废弃】
     * @param command
     */
    commandExport (command) {
      if(command === 'export') {
        this.$refs.exportForm.dialogVisible = true;
      }
    },
    /**
     * 导出表格
     * @param form
     */
    handleExport (form) {
      /**
       * 通知父组件导出表格
       */
      this.$emit('export', form);
    },
    /**
     * 高级查询点击搜索
     * @param form
     */
    handleHeadSearch (form) {
      /**
       * 通知父组件搜索
       */
      this.$emit('head-search', form);
    },
    /**
     * 重置高级查询
     * @private
     */
    handleHeadReset () {
      /**
       * 通知父组件重置
       */
      this.$emit('head-reset');
    },
    /**
     * 清空关键字，并触发查询
     * @private
     */
    clearKeyword () {
      this.keyword = null;
      this.searchKeyword();
    },
    /**
     * 搜索关键字
     * @private
     */
    searchKeyword () {
      /**
       * 通知父组件向服务器端搜索关键字
       */
      this.$emit('search-keyword', {[this.keywordKey]: this.keyword});
    },
    /**
     * 搜索树表格关键字
     * @private
     */
    searchTreeTableKeyword () {
      /**
       * 通知父组件搜索树表格关键字
       */
      this.$emit('search-tree-table-keyword', this.treeTableKeyword);
    },
    /**
     * 清空树表格关键字
     * @private
     */
    clearTreeTableKeyword () {
      this.treeTableKeyword = null;
      this.searchTreeTableKeyword();
    },
    /**
     * 监听点击创建【已废弃】
     * @private
     */
    handleCreate () {
      /**
       * 通知父组件点击创建【已废弃】
       */
      this.$emit('create');
    },
    /**
     * 监听批量删除【已废弃】
     * @private
     */
    handleBatchDelete () {
      /**
       * 通知父组件点击批量删除【已废弃】
       */
      this.$emit('batch-delete');
    },
    /**
     * 打开/关闭高级查询框
     * @private
     */
    toggleShowAdvancedBox () {
      this.showAdvancedBox = !this.showAdvancedBox;
    },
    /**
     * 高级查询触发搜索
     * @param {object} search 查询的请求对象
     * @public
     */
    handleAdvancedSearch (search) {
      /**
       * 通知父组件高级查询
       */
      this.$emit('search',{search: search});
    }
  }
};
</script>

<style lang="scss" scoped>
    $primaryColor: var(--primary-color);
    $fontSize: var(--font-size);
    ::v-deep{
        .el-scrollbar__wrap{
            overflow-x: hidden;
        }
    }
    .erp-page-table-header{
        box-sizing: content-box;
        padding: 8px 0;
        height: 30px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        button.el-button.erp-keyword-search-btn{
            background-color: $primaryColor;
            color: #fff;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border: 1px solid $primaryColor;
        }
        .handle-box{
            .screen-list{
                .screen-item{
                    margin-left: auto;
                    .query{
                        margin-left: 10px;
                        min-width: 160px;
                    }
                    .export{
                        margin-right: 10px;
                    }
                    &.handle{
                        &:hover{
                            background-color: transparent;
                        }
                    }


                }
            }
        }

    }
    .screen-box{
        .screen-list{
            .screen-item{
                min-width: 30px;
            }
        }
    }
    .screen-box, .handle-box{
        .screen-list{
            display: flex;
            flex-wrap: nowrap;
            .screen-item{
                white-space: nowrap;
                box-sizing: content-box;
                padding: 0 6px;
                height: 30px;
                line-height: 30px;
                margin-right: 4px;
                font-size: 13px;
                border-radius: 3px;
                cursor: pointer;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                &.button{
                    margin-right: 10px;
                }
                &.active{
                }
                ::v-deep{
                    .el-dropdown{
                        color: #333;
                        font-size: 13px;
                        .el-dropdown-link.active{
                            display: inline-block;
                            color: $primaryColor;
                            .badge-item{
                                top: -1px;
                            }
                        }
                    }
                }
                .screen-name{
                    color: #333;
                    margin-top: 0;
                    line-height: 30px;
                    border-bottom: 2px solid transparent;

                    .createBtnIcon{
                        //color: $primaryColor;
                    }
                }
                .badge-item{
                    margin-left: 4px;
                }
                &:hover{
                    background-color: rgba(0,0,0,0.075);
                }
                &.active{
                    margin-right: 10px;
                    .screen-name{
                        color: $primaryColor;
                        border-bottom: 2px solid $primaryColor;
                        &.more{
                            border-bottom: none;
                            .text{
                                display: inline-block;
                                height: 100%;
                                border-bottom: 2px solid $primaryColor;
                            }
                        }
                    }
                }
            }
        }
    }
    .erp-page-header{
        margin-top: 8px;
        display: flex;
        flex-wrap: nowrap;
        height: 36px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
        justify-content: space-between;
        .left{
            .left-box{
                display: flex;
                flex-wrap: nowrap;
                .keyword-box{
                    display: flex;
                    flex-wrap: nowrap;
                    margin-right: 10px;
                    .title{
                        font-size: $fontSize;
                        white-space: nowrap;
                        line-height: 28px;
                    }
                    .input{
                        min-width: 150px;
                    }
                    .btn{
                        margin-left: 10px;
                    }
                }
                .advance-query {
                    font-size: $fontSize;
                    color: $primaryColor;
                    line-height: 28px;
                    cursor: pointer;
                    white-space: nowrap;
                    padding:0 5px;
                    border-radius: 3px;
                    &:hover{
                        background-color: rgba(0,0,0,0.08);

                    }
                }
            }
        }
        .right{
            display: flex;
            flex-wrap: nowrap;
            margin-right: 15px;
        }
    }
    .advanced-box{
        border: 1px solid #eee;

        margin-bottom: 10px;
    }
</style>
